<template>
  <div class="dbzyAdd">
    <el-dialog
      title="新增"
      :visible.sync="centerDialogVisible"
      width="75%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :before-close="close"
      class="dialog"
      
      >
      <div style="max-width:1000px;margin:auto;">

      <p class="shenqing">申请信息</p>
      <table border="1" rules="all" class="tablestyle">
        <tr>
          <td style="height: 34px;text-align: center;">申请时间</td>
          <td>
            <el-date-picker
              style="width:100%"
              v-model="shenqingxinxi.receiveDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
             </el-date-picker>
          </td>
          <td style="height: 34px;text-align: center;">调入部门</td>
          <td>
            <treeSelect  style="width: 100%" size="small"  @department="addSelectChange" :model="shenqingxinxi.departmentName" type="department"></treeSelect>
          </td>
        </tr>
        <tr>
          <td style="height: 34px;text-align: center;">调拨人员</td>
          <td>
            <el-select style="width: 100%" v-model="shenqingxinxi.receiveUserId" placeholder="请选择">
              <el-option
                v-for="item in optionsdanwei"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId">
              </el-option>
            </el-select>
          </td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td style="height: 53px;text-align: center;">备注</td>
          <td  colspan="3" class="beizhu">
            <el-input
              type="textarea"
              autosize
              :autosize="{ minRows: 2, maxRows: 2}"
              placeholder="请输入内容"
              v-model="shenqingxinxi.remark">
            </el-input>
          </td>
        </tr>
      </table>
      <p class="shenqing">调拨信息</p>
      <div style="margin-left: 15px;margin-bottom: 15px">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="add">添加</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteBtn">删除</el-button>
         <el-button type="primary" icon="el-icon-plus" size="mini" @click="tijiao(2)">保存</el-button>
      <el-button type="success"  icon="el-icon-plus" size="mini" @click="tijiao(1)">提交</el-button>
      </div>


      <el-table  :data="shenqingxinxi.receiveDetailAddDtoList" stripe style="margin-left: 15px;"
                 @selection-change="handleSelectionChange"
                 border>
        <el-table-column align="center" type="selection" width="80"></el-table-column>
        <el-table-column align="center" type="index" label="序号"  width="55"  />
        <el-table-column align="center" label="设备编号" property="deviceCode" width="200" > </el-table-column>
        <el-table-column align="center" label="设备名称" property="deviceName" :show-overflow-tooltip="true"  > </el-table-column>
        <el-table-column align="center" label="规格型号" property="deviceModel" :show-overflow-tooltip="true" > </el-table-column>
<!--        <el-table-column align="center" label="调出部门"  property="deptName"  ></el-table-column>-->
        <el-table-column label="调出地点" property="repositoryName" align="center" ></el-table-column>
        <el-table-column align="center" label="调入地点" property="receiveSiteId"  >
          <template slot-scope="scope">
            <addressSelect @addSelectChangedd="addSelectChangedd" :numdata="scope.$index" type="dianrididian"></addressSelect>
          </template>
        </el-table-column>
<!--        <el-table-column align="center" label="变更责任人"  property="chargePersonId"  >-->
<!--          <template slot-scope="scope">-->
<!--            <el-select v-model="scope.row.chargePersonId" placeholder="请选择" >-->
<!--              <el-option-->
<!--                v-for="item in optionsdanwei"-->
<!--                :key="item.userId"-->
<!--                :label="item.userName"-->
<!--                :value="item.userId">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      </div>
    </el-dialog>

    <div style="text-align: center;margin-top: 50px;width: 1160px">

    </div>
    <equipment-AddDialog :routerData="transmitData" v-if="addshow" @callback="callback"></equipment-AddDialog>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import addressSelect from "./address";
  import { treeselect } from "@/api/system/dept";
  import treeSelect from '@/views/equipmentGL/equipmentTZ/treeSelect'
  import equipmentAddDialog from '../components/equipmentAddDialog'
  import {formatDay} from '@/utils/index'
  export default {
    name: "Role",
    components:{
      treeSelect,
      addressSelect,
      equipmentAddDialog
    },
    data() {
      return {
        centerDialogVisible:true,
        mineStatus:[],
        deptOption:undefined,
        deptOptions:undefined,//类别数据
        addshow:false,
        transmitData:{},//传给子集的数据
        shuliangSum:0,//总数量
        jinesum:0,//总金额
        tableDataxunz:'',
        dialogVisible:false,
        fileList: [{
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }, {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }],
        optionsleixing:[
          {value:'1',label:'设备采购'},
          {value:'2',label:'备件消耗材料采购'}
        ],//类型数据
        optionscgzq:[//采购周期
          {value:'1',label:'年'},
          {value:'2',label:'季'},
          {value:'3',label:'月'}
        ],
        //单位数据
        optionsdanwei:[],
        //总数居
        shenqingxinxi:{
          applyTime:'',
          receiveDeptId:'',
          remark:'',
          receiveDetailAddDtoList:[],
        },
        //采购信息
        caigouxinxi: {
          inputBiaoTi:'',//标题
          ghsj:'',//供货时间
          cgjh:'',//采购计划
          gouzhiliyou:'',//购置理由
          beizhu:'',//备注
        },
        tableDatajihuaXZ:[],//选中的数据
      };
    },

    created() {
      console.log('接收参数',this.$route.query)
      this.getTreeSS()
      this.getBgzrr()
      this.shenqingxinxi.applyTime=formatDay()
    },
    methods: {
      close(){
        this.$emit('subSetChane')
      },
      //变更责任人
      getBgzrr:function(){
        request({
          url: '/system/user/username',
          method: 'get',
        }).then(response => {
          this.optionsdanwei = response.data
          console.log('责任人',this.optionsdanwei)
        });

      },
      handleCheckChange(data, checked, node) {
        console.log('data',data)
        console.log('checked',checked)
        console.log('node',node)
        var arrLabel = []
        arrLabel.push(data.label)
        this.mineStatus = arrLabel;
      },
      //所属部门下拉
      getTreeSS() {
        treeselect().then(response => {
          this.ssbmOptions = response.data;
          this.deptOption= response.data;
        });
      },
      //弹框关闭回调函数
      callback:function(msg){
        for(var i=0;i<msg.length;i++){
          msg[i].deviceId = msg[i].id

        }
        this.addshow= false
        console.log('返回数据',msg)
        this.shenqingxinxi.receiveDetailAddDtoList= this.deteleObject(this.shenqingxinxi.receiveDetailAddDtoList.concat(msg))
      },
      deteleObject:function(data){
        let hash = {};
        const data2 = data.reduce((preVal, curVal) => {
          hash[curVal.deviceCode] ? '' : hash[curVal.deviceCode] = true && preVal.push(curVal);
          return preVal
        }, [])
        return data2
      },
      //附件删除
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      },
      //表格复选框监听
      handleSelectionChange:function(row){
        this.tableDatajihuaXZ = row
        console.log(' this.tableDatajihuaXZ', this.tableDatajihuaXZ)

      },
      //类型监听
      leixingchange:function(row){
        console.log('row',row)

      },
      //添加
      add:function () {
        console.log('添加')
        this.addshow = true


      },

      //删除
      deleteBtn:function () {
        for (var i=0;i< this.shenqingxinxi.receiveDetailAddDtoList.length;i++){
          for(var j=0;j<this.tableDatajihuaXZ.length;j++){
            if(this.shenqingxinxi.receiveDetailAddDtoList[i].index==this.tableDatajihuaXZ[j].index){//相等
              this.shenqingxinxi.receiveDetailAddDtoList.splice(i,1)
            }

          }
        }
        console.log(' this.tableDatajihua', this.shenqingxinxi.receiveDetailAddDtoList)
        this.fuzhiIndex()
      },
      //重新赋值index
      fuzhiIndex:function(){
        for (var i=0;i<this.shenqingxinxi.receiveDetailAddDtoList.length;i++){
          this.shenqingxinxi.receiveDetailAddDtoList[i].index =i
        }
      },
      //产品表格监听
      chanpinonChange(val) {
        console.log(val)
      },
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      //数量监听事件
      shulaingBtn:function (row) {
        console.log(row)
        row.xiaoji = (row.cgsl*1)* (row.jhje*1)
        this.hejisum()
      },
      //单价监听事件
      yjdjBtn:function (row) {
        console.log(row)
        row.xiaoji = (row.cgsl*1)* (row.jhje*1)
        this.hejisum()
      },
      //合计
      hejisum:function () {
        var shuchushi=0
        var jinechushi=0
        for (var i=0;i<this.tableDatajihua.length;i++){
          shuchushi =shuchushi + (this.tableDatajihua[i].cgsl)*1
          jinechushi = jinechushi+ (this.tableDatajihua[i].xiaoji)*1

        }
        this.shuliangSum = shuchushi
        this.jinesum = jinechushi

      },

      //提交1保存2
      tijiao:function (type) {
        if(!this.shenqingxinxi.applyTime){
          this.$message.warning('请选择申请时间!');
          return false
        }
        if(!this.shenqingxinxi.receiveDeptId){
          this.$message.warning('请选择调入部门!');
          return false
        }
        if(this.shenqingxinxi.receiveDetailAddDtoList.length<=0){
          this.$message.warning('请添加调拨信息!');
          return false
        }
        for(let i=0;i<this.shenqingxinxi.receiveDetailAddDtoList.length;i++){
          if(!this.shenqingxinxi.receiveDetailAddDtoList[i].receiveSiteId){
            this.$message.warning('请填写调入地点!');
            return false
          }
        }
        // this.shenqingxinxi.allotDetailList.forEach((i)=>{
        //   if(!i.receiveSiteId){
        //     this.$message.warning('请填写调入地点!');
        //     return false
        //   }
        // })
        this.shenqingxinxi.submitState = type
        request({
          url: '/device-allot-api',
          method: 'post',
          data:this.shenqingxinxi,
        }).then(response => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          // this.$router.push('/equipmentCZ/dbzy')
          this.$emit('subSetChane',1)
        });
      },
      //调入部门
      addSelectChange(data){
        console.log(data)
        this.shenqingxinxi.receiveDeptId = data.id//调入部门id
        this.shenqingxinxi.departmentName=data.label

      },
      //调入地点
      addSelectChangedd:function (data) { 
        console.log('调入地点',data)
        this.shenqingxinxi.receiveDetailAddDtoList[data.num].receiveSiteId =data.id
      }

    }
  };
</script>
<style lang="scss">
.dbzyAdd{
  .dialog .el-dialog__body{
      height: 85vh;
      overflow: scroll;
    }
    .shenqing{
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;

  }
  .tablestyle {
    width: 100%;
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
  }
  .el-input--medium .el-input__inner {
    border: none;
  }
  .leixing .el-select{
    width: 100%;
  }
  .caigoustyle {
    width: 100%;

  }
  .beizhu .el-textarea__inner {
    border: none;
  }
}
  




</style>
